<template>
	<div class="wrap echarts_box2">
		<div class="head">
			<div class="headline">
				<span class="title">运维事件看板</span>
			</div>
		</div>
		<div class="body">
			<div style="padding: 0 12px;overflow: hidden;height: 100%;">
				<table border="0" cellspacing="0" style="height: 100%;">
					<thead>
						<tr>
							<th style="width: 20%;">报警时间</th>
							<th style="width: 20%;">企业</th>
							<th style="width: 20%;">设备</th>
							<th style="width: 20%;">运维类型</th>
							<th style="width: 20%;">运维企业</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in tableData" :key="index">
							<td style="width: 20%;">{{item.time}}</td>
							<td style="width: 20%;">{{formatStr(item.deptName)}}</td>
							<td style="width: 20%;">{{item.deviceName}}</td>
							<td style="width: 20%;">{{formatStr(item.type)}}</td>
							<td style="width: 20%;">{{formatStr(item.maintenanceDeptName)}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import {getMaintenance2} from "@/api/bigScreen/bigScreen";
	export default {
		data() {
			return {
				// 酒店对油烟  其他队扬尘
				tableData: [],
				timer: null,
				timer2: null,
				allList: [],
				count: 7
			}
		},
		mounted() {			
			this.init()
			let that=this
			this.timer = setInterval(this.infoControllTimer, 2000);
			this.timer2=setInterval(function(){
				clearInterval(that.timer)
				that.init()
				that.timer = setInterval(that.infoControllTimer, 2000);
			},300000)  			
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
           clearInterval(this.timer2)
	    },		
		methods: {
			formatStr(str){
				if(str&&str.length>=8){
					str='****'+str.substring(str.length-5,str.length)
				}
				return str
			},
			infoControllTimer() {
				this.count++
				this.tableData.shift();
				if(this.count <= this.allList.length-1) {
					this.tableData.push(this.allList[this.count])
				} else {
					this.count = 0
					this.tableData.push(this.allList[this.count])
				}
			},
//			compare(property) {
//				return function(a, b) {
//					var value1 = a[property];
//					var value2 = b[property];
//					return value2 - value1;
//				}
//			},
			init() {				
				// 创建8调数据
				getMaintenance2().then(res=>{
					this.allList = res.data.data
					for(var i = 0; i < 8; i++) {
						this.tableData.push(this.allList[i])
					}	
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.head {
		margin-bottom: 4px;
	}
	
	.body {
		flex: 1;
		width: 100%;
		overflow: hidden;
		table {
			width: 100%;
		}
		table thead tr th {
			color: #3591ff;
			font-size: 12px;
		}
		table tbody tr:nth-child(2n) {
			background-color: #17213d;
		}
		table tbody tr td {
			text-align: center;
			padding: 6px 0;
			color: #fff;
			font-size: 12px;
			line-height: 1.25;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

</style>